<template>
  <div class="coat">
    <el-container>
      <el-header class="theHeader" height="80px">
        <div class="buttonBox">
          <div @click="forwardTo('/unit')"><img src="@/assets/images/unitStatBlue.png" alt=""></div>
          <div @click="forwardTo('/cars')"><img src="@/assets/images/carsStatBlue.png" alt=""></div>
          <div @click="forwardTo('/company')"><img src="@/assets/images/companyStatOrange.png" alt=""></div>
        </div>
        <div class="buttonBox">
          <div @click="forwardTo('/dispatch')"><img src="@/assets/images/dispatchStatBlue.png" alt=""></div>
          <div @click="forwardTo('/expense')"><img src="@/assets/images/expenseStatBlue.png" alt=""></div>
        </div>
      </el-header>
      <el-container class="upperContainer">
        <el-main style="margin-top: 30px;">
          <div class="theBlock">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">服务公司审核状态统计</span>
              </template>
              <template #last>
                <span class="theLast">按公司审核状态对公司进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <DoubleDeck :data="dataLUp" />
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">服务公司类型统计</span>
              </template>
              <template #last>
                <span class="theLast">按公司类型进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <DoubleDeck :data="dataLDown" />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
        <el-main class="middleMain">
          <el-select :suffix-icon="PointerDown" :teleported="false" class="middleSelect" v-model="middleSelect"
            value-key="" placeholder="地区" @change="">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <div class="middleNumber">
            <span class="middleNumberTitle">服务公司数量</span>
            <span style="font-size: 50px;color: #fff;">1,231,321</span>
          </div>
          <div class="companyCity"></div>
        </el-main>
        <el-main class="rightMain" style="margin-top: 30px;">
          <div class="theBlock">
            <TheTitle theSize="small" theType="thicken">
              <template #first>
                <span class="theFirst">区域服务公司统计</span>
              </template>
              <template #last>
                <span class="theLast">按照地区对服务公司数量进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <RankList :data=dataRank theType="green" />
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thicken">
              <template #first>
                <span class="theFirst">服务公司服务期限统计</span>
              </template>
              <template #last>
                <span class="theLast">按服务期限结束时间（近一个月）进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <TagsPie :data=dataPie />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'

import TheTitle from '@/components/TheTitle.vue';
import CuttingLine from '@/components/CuttingLine.vue';
import RankList from '@/components/RankList.vue'
import DoubleDeck from '@/components/DoubleDeckPie.vue';
import TagsPie from '@/components/TagsPie.vue';

import { forwardTo } from '@/hook/forwardTo';

import PointerDown from '@/components/PointerDown.vue'

const middleSelect = ref('')
const options = [
  {
    value: '石家庄',
    label: '石家庄'
  }
]


const dataLUp = {
  id: 'up',
  data: [
    { value: 12454, name: '审核中' },
    { value: 13454, name: '已通过' },
    { value: 14454, name: '未通过' },
    { value: 15454, name: '维保公司' },
  ],
  sum: 55816,
  theColorList: ['#ffa800', '#10ff61', '#ff56a7', '#108cff',]
}

const dataLDown = {
  id: 'down',
  data: [
    { value: 12454, name: '租赁公司' },
    { value: 13454, name: '加油公司' },
    { value: 14454, name: '保险公司' },
    { value: 15454, name: '维保公司' },
  ],
  sum: 55816,
  theColorList: ['#2cdfff', '#ff6f5b', '#40cc97', '#108cff',]
}

const dataRank = {
  label: ['编号', '区县', '占比', '单位数量',],
  data: [{ name: '市辖区', id: 130101000000, percent: '18', amount: '1800' },
  { name: '长安区', id: 130102000000, percent: '18', amount: '1800' },
  { name: '桥西区', id: 130104000000, percent: '18', amount: '1800' },
  { name: '新华区', id: 130105000000, percent: '18', amount: '1800' },
  { name: '井陉矿区', id: 130107000000, percent: '18', amount: '1800' },
  { name: '裕华区', id: 130108000000, percent: '18', amount: '1800' },
  { name: '藁城区', id: 130109000000, percent: '18', amount: '1800' },
  { name: '鹿泉区', id: 130110000000, percent: '18', amount: '1800' },
  { name: '栾城区', id: 130111000000, percent: '18', amount: '1800' },
  { name: '井陉县', id: 130121000000, percent: '18', amount: '1800' },
  { name: '正定县', id: 130123000000, percent: '18', amount: '1800' },
  { name: '行唐县', id: 130125000000, percent: '18', amount: '1800' },
  { name: '灵寿县', id: 130126000000, percent: '18', amount: '1800' },
  { name: '高邑县', id: 130127000000, percent: '18', amount: '1800' },
  { name: '深泽县', id: 130128000000, percent: '18', amount: '1800' },
  { name: '赞皇县', id: 130129000000, percent: '18', amount: '1800' },
  { name: '无极县', id: 130130000000, percent: '18', amount: '1800' },
  { name: '平山县', id: 130131000000, percent: '18', amount: '1800' },
  { name: '元氏县', id: 130132000000, percent: '18', amount: '1800' },
  { name: '赵县', id: 130133000000, percent: '18', amount: '1800' },
  { name: '高新区', id: 130171000000, percent: '18', amount: '1800' },
  { name: '化工园区', id: 130172000000, percent: '18', amount: '1800' },
  { name: '辛集市', id: 130181000000, percent: '18', amount: '1800' },
  { name: '晋州市', id: 130183000000, percent: '18', amount: '1800' },
  { name: '新乐市', id: 130184000000, percent: '18', amount: '1800' },],
  theType: 'orange'
}

const dataPie = {
  data: [
    { value: 12454, name: '即将到期' },
    { value: 24908, name: '未到期' }],
  sum: 37362,
  id: 'theTagsPie',
  type: 'value',
  theColorList: ['#0085ff', '#ff823b',]
}

</script>
<style scoped>
.companyCity {
  height: 569px;
  width: 840px;

  background-image: url('@/assets/images/companyCity.png');
  background-position: center center;

  position: relative;
  top: -40px;
}
</style>